<template>
  <view class="expert-detail">
    <view class="content-nav">
      <view class="content-head">
        <view class="head-avatar">
          <image :src="userList.avatar" mode="" class="avatar-img"></image>
        </view>
        <view class="head-name">
          <view>{{userList.nickname}}</view>
          <view class="head-title">擅长{{expertList.expertise}}</view>
        </view>
        <view class="head-btn">
          <up-button text="鉴定" shape="circle" plain color="#A4682F"
            @click="onRelease(expertList.expertise)"></up-button>
        </view>
      </view>
      <view class="content-title">{{expertList.desc}}</view>
      <view class="content-label">
        <view class="label-box">
          <view class="box-num">
            <view>{{expertList.count}}</view>
            <view class="num-unit">次</view>
          </view>
          <view class="box-title">累计鉴定</view>
        </view>
        <view class="label-box">
          <view class="box-price">
            <view class="price-unit">￥</view>
            <view>{{expertList.price}}</view>
          </view>
          <view class="box-title">鉴定费用</view>
        </view>
      </view>
    </view>
    <view class="detail-main">
      <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
        <view class="detail-nav">
          <view class="nav-content" v-for="item,index in orderList" :key="item.id" @click="onTask(item)">
            <view class="content-img">
              <view class="img-mask" v-show="item.is_open ==0">
                <up-icon name="lock" color="#fff" size="48rpx"></up-icon>
                <view class="mask-title">鉴定未公开</view>
              </view>
              <image :src="item.head_img" mode="aspectFill" class="image"></image>
            </view>
            <view class="content-info">
              <view class="info-status" v-show="item.is_open ==1">
                <image src="@/static/home/image/truth.png" mode="" v-show="item.label ==1"></image>
                <image src="@/static/home/image/fake.png" mode="" v-show="item.label ==-1"></image>
                <image src="@/static/home/image/question.png" mode="" v-show="item.label ==2"></image>
              </view>
              <view class="info-head">
                <image :src="item.user.avatar" mode="" class="head-avatar"></image>
                <view class="head-name">{{item.user.nickname}}</view>
              </view>
              <view class="info-title">{{item.desc}}</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
    <view class="detail-btn">
      <up-button text="请他鉴定" shape="circle" color="#A4682F" @click="onRelease(expertList.expertise)"></up-button>
    </view>
  </view>
  <tab-popup :show.sync="show" :listData="classificationList" @showClose="show = false"
    @release="onrelease"></tab-popup>
</template>

<script setup>
  import {
    expertInfo
  } from './api.js'
  import {
    ref
  } from 'vue'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)
  const show = ref(false)
  const classificationList = ref([])
  const orderList = ref([])
  const expertList = ref({})
  const expertId = ref()
  const userList = ref({})
  const upOption = ref({
    empty: {
      tip: '~ 暂无鉴定内容 ~'
    }
  })
  onLoad((e) => {
    if (e && e.id) {
      expertId.value = e.id
    }
  })
  const upCallback = (mescroll) => {
    expertInfo({
      expert_id: expertId.value,
      page: mescroll.num
    }).then(res => {
      expertList.value = res.data
      userList.value = res.data.user
      const curPageData = res.data.task || [] // 当前页数据
      const totalPage = res.data.total
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }

  function onRelease(val) {
    const data = uni.getStorageSync("classificationList")
    const list = val.split(',')
    classificationList.value = data.filter(item => list.includes(item.name))
    if (list.length > 1) {
      show.value = true
    } else {
      if (uni.getStorageSync('userInfo').token) {
        uni.setStorageSync('treasure', classificationList.value[0])
        uni.navigateTo({
          url: `/pages/index/identifyPage/identifyRelease?expertId=${expertId.value}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/my/loginPage'
        })
      }

    }
  }

  function onTask(item) {
    if (item.is_open === 0) {
      uni.showToast({
        title: "该用户未公开鉴定",
        icon: 'none'
      })
    } else {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${item.id}`
      })
    }
  }

  function onrelease() {
    show.value = false
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyRelease?expertId=${expertId.value}`
    })
  }
</script>

<style lang="scss" scoped>
  .expert-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    padding: 0 30rpx;

    .content-nav {
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 30rpx 30rpx 0;

      .content-head {
        display: flex;
        width: 100%;
        align-items: center;

        .head-avatar {
          height: 100rpx;
          width: 100rpx;
          border-radius: 50%;

          .avatar-img {
            height: 100rpx;
            width: 100rpx;
            border-radius: 50%;
          }
        }

        .head-name {
          flex: 1;
          margin: 0 24rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);

          .head-title {
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            margin-top: 4rpx;
          }
        }

        .head-btn {
          width: 136rpx;
          height: 64rpx;

          .u-button {
            height: 64rpx;
          }
        }
      }

      .content-title {
        margin-top: 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 1.5;
      }

      .content-label {
        width: 100%;
        height: 140rpx;
        border-top: 2rpx solid #ebebeb;
        margin-top: 30rpx;
        box-sizing: border-box;
        padding: 30rpx 0;
        display: flex;

        .label-box {
          height: 100%;
          flex: 1;
          border-right: 2rpx solid #ebebeb;
          display: flex;
          flex-direction: column;
          align-items: center;

          .box-num {
            font-size: 36rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: baseline;

            .num-unit {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin: 0 4rpx;
            }
          }

          .box-price {
            font-size: 36rpx;
            font-weight: 400;
            color: rgba(245, 32, 32, 1);
            display: flex;
            align-items: baseline;

            .price-unit {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(245, 32, 32, 1);
            }
          }

          .box-title {
            margin-top: 4rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);

          }
        }

        .label-box:last-child {
          border: none;
        }
      }
    }
    .detail-main{
      flex: 1;
      overflow: hidden;
      padding-bottom: 90rpx;
    }

    .detail-nav {
      width: 100%;
      margin: 24rpx 0 150rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .nav-content {
        width: 336rpx;
        height: 464rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-bottom: 20rpx;
        overflow: hidden;

        .content-img {
          width: 336rpx;
          height: 336rpx;
          position: relative;

          .img-mask {
            width: 336rpx;
            height: 336rpx;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            opacity: 0.6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;

            .mask-title {
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              margin-top: 12rpx;
            }
          }

          .image {
            width: 336rpx;
            height: 336rpx;
          }
        }

        .content-info {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 20rpx;
          position: relative;

          .info-status {
            position: absolute;
            right: 16rpx;
            top: -46rpx;
            height: 96rpx;
            width: 96rpx;
            border-radius: 50%;
            z-index: 1;
            background-color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              height: 80rpx;
              width: 80rpx;
            }
          }

          .info-head {
            display: flex;
            align-items: center;

            .head-avatar {
              height: 36rpx;
              width: 36rpx;
              border-radius: 50%;
            }

            .head-name {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-left: 8rpx;
            }
          }

          .info-title {
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-top: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .detail-btn {
      width: 690rpx;
      height: 88rpx;
      position: fixed;
      bottom: 12rpx;
      margin: auto;
      z-index: 1;
    }
  }
</style>